{% extends 'layout/indexframe.html' %}

{% block title %}index{% endblock %}

{% block css %}
    <style>
        .img-circle {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }

        .divvideo {
            background: #FFFFFF;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        .div img {
            width: 100%;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }

        select {
            width: auto;
            border: 1px solid #e5e5e5;
            outline: none; /*清除难看的粗黑线*/
            padding: 4px 24px 4px 10px;
            font-size: 16px;
        }

        option {
            /*可以设置背景色和字体颜色*/
            color: #ea5400;
            font-size: 14px;
        }

        option:hover {
            /*全部无效*/
        }

        option:checked {
            color: #fff;
            background: rgb(128, 64, 99);
        }

    </style>
{% endblock %}

{% block content %}

    <div class="wrapper wrapper-content animated fadeInRight" style="height: 2000px;">
        <div>
            <div class="col-xs-6"><h2 id="modeltitle" mid="{{ mid }}">点击模块可进行可视化</h2></div>
            <div class="col-xs-4"><h1><input mid="{{ obj.id }}" type="button" class="btn btn-default btn-lg pubbtn"
                                             value="发布主题"></h1></div>
            <div class="col-xs-2"><h1><a href="/web/device/temp/">返回上一页</a>
            </h1></div>
        </div>

        <div>
            <div class="col-xs-8">
                <div id="modellist">
                    {{ modellist }}
                </div>
            </div>

            <div class="col-xs-4">
                <div id="videol" class="panel-body" style="height: 1500px; overflow-y:scroll">
                    {{ modelvideo }}
                </div>
            </div>
        </div>
    </div>

    {#发布详情#}
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>发布主题</strong></h1>
                </div>
                <div class="modal-body">
                    <form id="pubfrom">
                        <div class="clearfix">
                            <div style="margin-left: 100px;">
                                <div class="form-group">
                                    <label><h2><strong>To</strong></h2></label>
                                    <select id="sendtopic">
                                        <option selected>请选择主题</option>
                                        {% for topic in pubobj %}
                                            <option>{{ topic }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label><h2><strong>Data</strong></h2></label>
                                    <div><textarea id="senddata" style="height: 50px;"></textarea></div>
                                    <span id="sendmes" style="color: #009900;"></span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input id="pubdata" type="button" class="btn btn-primary" value="发布">

                </div>
            </div>
        </div>
    </div>

    {# 主视图 #}

    <div class="modal" id="myModaldata" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button id='showhistory' topic='' type="button" class="btn btn-success historydata"
                            data-dismiss="modal"><h3>
                        点击查看历史趋势</h3></button>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>可视化</strong></h1>
                </div>
                <div class="modal-body">
                    <div id="container" style="height: 600px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="myhistoryModaldata" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button id='showhistory' type="button" class="btn btn-success historydata" data-dismiss="modal"><h3>
                        点击查看历史趋势</h3></button>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>可视化</strong></h1>
                </div>
                <div class="modal-body">
                    <div id="container1" style="height: 600px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>




{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $('#devframe').addClass('active')

        });
    </script>>

    <script>
        $(document).ready(function () {
            var mid = $('#modeltitle').attr('mid')
            setInterval(function () {
                $.ajax({
                    url: "/web/modelshow/",
                    type: "GET",
                    data: {"nid": mid},
                    dataType: "JSON",
                    success: function (result) {
                        if (result.status) {
                            document.getElementById("modellist").innerHTML = result.data;
                        }

                    }
                });
            }, 1000);
        });
    </script>

    <script>
        $(document).ready(function () {
            var mid = $('#modeltitle').attr('mid')
            setInterval(function () {
                $.ajax({
                    url: "/web/videoshow/",
                    type: "GET",
                    data: {"nid": mid},
                    dataType: "JSON",
                    success: function (result) {
                        {#document.getElementById("videol").innerHTML = result.video;#}
                        $.each(result.video, function (name, value) {
                            $("#" + name).attr('src', value);
                        })
                        $('#' + result.id).attr('src', result.scrpath);
                    }
                });
            }, 400);

        });
    </script>

    <script>
        $(function () {
            bindpubdata();
            bindselect();
            bindshowdata();
            bindclosemodal();
            bindshowhistory();
        })

        function bindpubdata() {
            $('.pubbtn').click(function () {
                $('#myModal3').modal('show');

            });
        }

        function bindshowhistory() {
            $('.historydata').click(function () {
                    var option;
                    option = {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['Email']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: []
                    };
                    var topic_id = $(this).attr('topic');
                    $.ajax({
                        url: '/web/oneline/',
                        type: 'GET',
                        data: {'topic_id': topic_id, 'count': 1000},
                        dataType: 'JSON',
                        success: function (res) {
                            if (res.status) {
                                option.legend.data = res.data.legend;
                                option.xAxis.data = res.data.x;

                                var str = {
                                    "name": res.data.name,
                                    "type": 'line',
                                    "stack": 'Total',
                                    "data": res.data.y,
                                }
                                option.series = str;
                                var name = res.data.name
                                var datalist = res.data.y;
                                option.title.text = res.data.legend;
                                $("#myhistoryModaldata").modal("show");
                                var dom = document.getElementById('container1');
                                var myChart = echarts.init(dom, null, {
                                    renderer: 'canvas',
                                    useDirtyRect: false
                                });
                                var app = {};
                                if (option && typeof option === 'object') {
                                    myChart.setOption(option);
                                }
                                window.addEventListener('resize', myChart.resize);
                            }
                        }
                    })
                }
            )
        }


        var event;

        function bindshowdata() {
            $(document).on('click', '.showdata1', function trys() {
                var option;
                option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['Email']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: []
                };
                var topic_id = $(this).attr("topic");
                $("#showhistory").attr('topic', topic_id);
                $.ajax({
                    url: '/web/oneline/',
                    type: 'GET',
                    data: {'topic_id': topic_id, 'count': 50},
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            option.legend.data = res.data.legend;
                            option.xAxis.data = res.data.x;

                            var str = {
                                "name": res.data.name,
                                "type": 'line',
                                "stack": 'Total',
                                "data": res.data.y,
                            }
                            option.series = str;
                            var name = res.data.name
                            var datalist = res.data.y;
                            option.title.text = res.data.legend;
                            $("#myModaldata").modal("show");
                            var dom = document.getElementById('container');
                            var myChart = echarts.init(dom, null, {
                                renderer: 'canvas',
                                useDirtyRect: false
                            });
                            var app = {};

                            if (option && typeof option === 'object') {
                                myChart.setOption(option);
                            }
                            window.addEventListener('resize', myChart.resize);
                            event = setInterval(function () {
                                $.ajax({
                                    url: '/web/flushdata/',
                                    data: {'topic_id': topic_id},
                                    Tasync: true,
                                    dataType: 'JSON',
                                    success: function (res) {
                                        if (res.status) {
                                            if (datalist.length >= 50) {
                                                option.xAxis.data.shift();
                                                datalist.shift();
                                                option.xAxis.data.push(res.data.x);
                                                datalist.push(res.data.y);
                                            } else {
                                                option.xAxis.data.push(res.data.x);
                                                datalist.push(res.data.y);
                                            }
                                            str = {
                                                "name": name,
                                                "type": 'line',
                                                "stack": 'Total',
                                                "data": datalist,
                                            }
                                            option.series = str;
                                            myChart.setOption(option);
                                            window.addEventListener('resize', myChart.resize);
                                        }
                                    }
                                });
                            }, 1000);
                        }
                    }
                })
            })
        }

        function bindclosemodal() {
            $('#myModaldata').on('hidden.bs.modal',
                function () {
                    clearInterval(event);
                })
        }

        function bindselect() {
            $('#pubdata').click(function () {
                var topic = $('#sendtopic').children('option:selected').val();
                var data = $('#senddata').val();
                $.ajax({
                    url: "/web/temp/pub/",
                    type: "POST",
                    data: {"topic": topic, "data": data},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes').text("发布成功")
                        } else {
                            $('#sendmes').text("发布失败请检查topic与data")
                        }

                    }
                })
            })

        }
    </script>


{% endblock %}